import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import Wrapper from './Wrapper';
import { Link } from 'react-router';

export default class Welcome extends Component {
  render() {
  	return (
      <Wrapper>
        <div style={styles.container}>
          <h1 style={styles.h1}>IMLOOKE.</h1>
          <p style={styles.p1}>这是一个自由并且奇妙的网站。</p>
          <p style={styles.p1}>寻找兴趣相同的伙伴。</p>
          <p style={styles.p2}>去完成有趣的活动。</p>
          <Link to={`/register`}>
            <RaisedButton 
              label="加入吧" 
              primary={true} 
              style={styles.Btn} />
          </Link>
          <br />
          <Link to={`/login`}>
            <FlatButton 
              label="登录"
              style={styles.Btn} />
          </Link>
        </div>
      </Wrapper>
  	);
  }
};

const styles = {
  container: {
    fontFamily: 'Roboto',
    flexGrow: 1,
    flexShrink: 0,
    flexBasis: 'auto',
    alignSelf: 'center',
    textAlign: 'center',
    color: '#fff'
  },
  Btn: {
    width: 336,
    marginBottom: 16,
    color: '#fff',
    backgroundColor: 'rgba(255,255,255,0.48)',
  },
  h1: {
    fontSize: 56,
    marginBottom: 0
  },
  p1: {
    marginTop: 8,
    marginBottom: 8
  },
  p2: {
    marginTop: 8,
    marginBottom: 16
  }
};
